<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="topBanner">
			<swiper style="height: 580rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true">
				<swiper-item v-for="item in banner" :key="item.id" @click="toMessage(item)">
					<image :lazy-load="true" class="swiper-item" :src="item.publicize_img" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 输入框 -->
		<view class="positionInput">
			<view class="input" @click="searchBack">
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入搜索关键词" clearButton="none"
					cancelButton="none" @confirm="search" />
			</view>
			<button open-type="contact" class="btnContact"><uni-icons type="headphones" size="30"
					color="#000"></uni-icons></button>
		</view>

		<!-- nav导航 -->
		<view class="nav">
			<view style="display: flex;flex-direction: column;align-items: center;" v-for="navitem in FenLeiList"
				:key="navitem.id" @click="toSearch(navitem)">
				<view class="navList" style="width: 100rpx;height: 100rpx;"
					:style="{backgroundImage:`url(${navitem.img})`}">
				</view>
				<text style="font-size: 24rpx;">{{navitem.type}}</text>
			</view>
		</view>
		<view class="nav" style="margin-top: 10rpx;">
			<view style="display: flex;flex-direction: column;align-items: center;" v-for="navitem in FenLeiList2"
				:key="navitem.id" @click="toSearch2(navitem)">
				<view class="navList" style="width: 100rpx;height: 100rpx;"
					:style="{backgroundImage:`url(${navitem.img})`}">
				</view>
				<text style="font-size: 24rpx;">{{navitem.type}}</text>
			</view>
		</view>

		<view style="margin: 20rpx;font-size: 32rpx; font-weight: 600;">新闻中心</view>
		<!-- 新闻轮播图 -->
		<view class="bottomBanner">
			<swiper style="height: 406rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true">
				<swiper-item v-for="item in xinBanner" :key="item.id" @click="toMessage(item)">
					<image :lazy-load="true" class="iamge" :src="item.publicize_img" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<template v-for="item in danYuanLieBiao" :key="item.id">
			<view style="margin: 20rpx;font-size: 32rpx; font-weight: 600;">{{item.type}}</view>
			<!-- 单元名称 -->
			<view class="List">
				<view class="listitem" v-if="item.one" @click="toDetail(item.one.goods_id)">
					<image :lazy-load="true" style="width: 240rpx;height: 282rpx;" :src="item.one.publicize_img"
						mode="aspectFill"></image>
				</view>
				<view class="SonList">
					<view v-if="item.children?.length>0" class="list" v-for="sonItem in item.children" :key="sonItem.id"
						@click="toDetail(sonItem.goods_id)">
						<image :lazy-load="true" style="width: 100%;height: 100%;" :src="sonItem.publicize_img"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</template>

		<view style="margin: 20rpx;font-size: 32rpx; font-weight: 600;">云联智控</view>
		<!-- 单元名称 -->
		<view class="deviceList">
			<template v-if="deviceList?.length>0">
				<view class="sonDevice" v-for="item in deviceList" :key="item.id" @click="towuLian(item.id)"
					:style="{backgroundImage:`url(${item.device_img})`}">
					<view class="deviceTitle">{{item.device_name}}</view>
				</view>
			</template>
			<template v-else>
				<view class="addDevice" @click="toLink('/dianXiang/pages/index')">
					<view style="text-align: center;">
						<uni-icons type="plus-filled" size="30"></uni-icons>
						<view style="font-size: 24rpx;">添加设备</view>
					</view>
				</view>
			</template>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getTypeList,
		getMkList,
		getAdList,
		getIndexTypeList
	} from "../../api/index.js"
	import {
		getDeviceDetail
	} from "@/api/wuLian.js"
	import {
		getUser
	} from "../../utils/token.js"
	import {
		useUserStore
	} from "@/stores/user.js"

	const user = getUser()
	const userStore = useUserStore()

	// 数据定义
	const banner = ref([])
	const xinBanner = ref([])
	const FenLeiList = ref([])
	const FenLeiList2 = ref([])
	const danYuanLieBiao = ref([])
	const deviceList = ref([])

	// 方法定义
	const toMessage = (item) => {
		if (item.goods_id) {
			// toDetail(item.goods_id)
			uni.navigateTo({
				url: "/chanPin/pages/xiLieXiangQing?id=" + item.goods_id
			})
		} else {
			uni.navigateTo({
				url: "/index/pages/detail?url=" + item.url
			})
		}
	}

	const toSearch = (item) => {
		uni.navigateTo({
			url: `/index/pages/search/result?goods_type_oid=${item.id}&title=${item.type}`
		})
	}
	const toSearch2 = (item) => {
		uni.navigateTo({
			url: `/index/pages/search/result?goods_type_tid=${item.id}&title=${item.type}`
		})
	}

	const getIndexList = async () => {
		try {
			const [typeList, mkList, adList] = await Promise.all([
				getIndexTypeList(),
				getMkList(),
				getAdList()
			])
			console.log(typeList, 42)
			FenLeiList.value = typeList.data.one
			FenLeiList2.value = typeList.data.two
			banner.value = mkList.data[0].children
			xinBanner.value = mkList.data[1].children
			danYuanLieBiao.value = adList.data
		} catch (error) {
			console.error('获取首页数据失败:', error)
		}
	}

	const toDetail = (id) => {
		uni.navigateTo({
			url: "/chanPin/pages/chanPinXiangQing?id=" + id
		})
	}

	const towuLian = (id) => {
		uni.navigateTo({
			url: "/wuLian/pages/index?id=" + id
		})
	}

	const searchBack = () => {
		uni.navigateTo({
			url: "/index/pages/search/index"
		})
	}

	const toLink = (src) => {
		uni.navigateTo({
			url: src
		})
	}

	// 生命周期
	onMounted(() => {
		getIndexList()
	})

	onShow(() => {
		const user = getUser()

		if (user.id) {
			getDeviceDetail(user.id).then(e => {
				deviceList.value = e.data
			})
		}
	})
	
</script>

<style scoped>
	.container {
		background-color: #ffffff;
	}

	.deviceList {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 0 20rpx;
		gap: 10rpx;
	}

	.addDevice {
		border: 1px solid #f6f6f6;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		background-size: 100% 100%;
		background-image: url('https://www.sldlq.com/api/storage/images/device.png?127654');
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
	}

	.sonDevice {
		border: 1px solid #f3f3f3;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 300rpx;
		background-color: #f3f3f3;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.deviceTitle {
		background-color: rgba(230, 0, 18, 0.5);
		color: #FFFFFF;
		width: 100%;
		padding: 10rpx 0;
		text-align: center;
		border-bottom-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.btnContact {
		padding: 0;
		background: none;
		border: none;
		line-height: 1;
	}

	.btnContact::after {
		display: none;
	}

	.topBanner {
		height: 580rpx;
	}

	.iamge {
		width: 720rpx;
		height: 406rpx;
	}

	.bottomBanner {
		height: 406rpx;
		margin-left: 25rpx;
	}

	.swiper-item {
		width: 100%;
		height: 580rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.positionInput {
		width: 700rpx;
		height: 108rpx;
		background-color: #FFFFFF;
		z-index: 99;
		position: absolute;
		top: 520rpx;
		left: 25rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		justify-content: space-around;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.input {
		width: 600rpx;
		height: 80rpx;
		background-color: #F7F8FA;
		border-radius: 50rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.nav {
		min-height: 183rpx;
		display: flex;
		overflow-x: hidden;
		white-space: nowrap;
		margin-top: 60rpx;
		padding: 0 20rpx;
		gap: 10rpx;
	}

	.nav:hover {
		overflow-x: auto;
	}

	.nav::-webkit-scrollbar {
		width: 6rpx;
		height: 6rpx;
	}

	.nav::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 3rpx;
	}

	.nav::-webkit-scrollbar-track {
		background-color: #f5f5f5;
		border-radius: 3rpx;
	}

	.nav>view {
		flex: 0 0 auto;
		width: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.navList {
		width: 90rpx;
		height: 90rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-color: #FFFFFF;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.List {
		margin-left: 25rpx;
		margin-bottom: 40rpx;
		height: 300rpx;
		padding: 0;
		display: flex;
		overflow-x: hidden;
		overflow-y: hidden;
		scrollbar-width: 14rpx;
	}

	.List:hover {
		overflow-x: auto;
	}

	.List::-webkit-scrollbar {
		width: 14rpx;
		height: 14rpx;
	}

	.List::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 4rpx;
	}

	.List::-webkit-scrollbar-track {
		background-color: #f5f5f5;
		border-radius: 4rpx;
	}

	.listitem {
		width: 250rpx;
		height: 282rpx;
		padding: 0;
		margin-right: 10rpx;
	}

	.SonList {
		display: grid;
		grid-auto-columns: 282rpx;
		grid-auto-flow: column;
		grid-gap: 10px;
		grid-template-rows: repeat(2, 131rpx);
		padding-right: 60rpx;
	}
</style>